<template>
  <view class="container">
    <!-- 顶部背景和头像信息 -->
    <view class="header-background"></view>
    <view class="profile-info">
      <view class="avatar-wrapper">
        <image class="avatar" :src="userAvatar" mode="aspectFill" />
      </view>
      <text class="user-name">{{ isLoggedIn ? username : '未登录' }}</text>
    </view>

    <!-- 功能列表 -->
    <view class="feature-list">
      <view class="list-item" @click="handleLoginOrLogout">
        <uni-icons :type="isLoggedIn ? 'person-filled' : 'person'" size="20" color="#666"></uni-icons>
        <text class="item-text">{{ isLoggedIn ? '退出登录' : '登录' }}</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="list-item" @click="clearCache">
        <uni-icons type="clear" size="20" color="#666"></uni-icons>
        <text class="item-text">清除缓存</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="list-item" @click="manageImages" v-if="isLoggedIn">
        <uni-icons type="images-filled" size="20" color="#666"></uni-icons>
        <text class="item-text">管理图片</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <!-- 临时保留上传入口，实际应该集成到某个功能中 -->
      <!-- <view class="list-item" @click="showUploadOptions" v-if="isLoggedIn">
        <uni-icons type="upload-filled" size="20" color="#666"></uni-icons>
        <text class="item-text">上传图片（开发用）</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view> -->
    </view>

    <!-- 底部版权信息 -->
    <view class="footer">
      <text class="copyright">©728209093@qq.com</text>
      <text class="designer">联系我吧</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { clearImageCache } from '@/services/imageService';

const currentType = ref(null);
const isLoggedIn = ref(false); // 模拟登录状态
const username = ref('');
const userAvatar = ref('/static/avatar-placeholder.png'); // 默认头像

// 检查登录状态和用户名
const checkLoginStatus = () => {
  const loggedIn = uni.getStorageSync('isLoggedIn');
  const storedUsername = uni.getStorageSync('username');
  const storedUserAvatar = uni.getStorageSync('userAvatar');

  isLoggedIn.value = !!loggedIn;
  username.value = storedUsername || '';
  // userAvatar.value = storedUserAvatar || '/static/avatar-placeholder.png';
};

onMounted(() => {
  checkLoginStatus();
});

// 监听页面显示，确保从登录页返回时更新状态
onShow(() => {
  checkLoginStatus();
});

// 处理登录/登出逻辑
const handleLoginOrLogout = () => {
  if (isLoggedIn.value) {
    // 登出
    uni.removeStorageSync('isLoggedIn');
    uni.removeStorageSync('username');
    uni.removeStorageSync('token'); // 登出时清除token
    uni.removeStorageSync('userAvatar'); // 登出时清除头像
    isLoggedIn.value = false;
    username.value = '';
    userAvatar.value = '/static/avatar-placeholder.png'; // 重置为默认头像
    uni.showToast({
      title: '已退出登录',
      icon: 'success',
      duration: 1500
    });
  } else {
    // 跳转到登录页
    uni.navigateTo({
      url: '/pages/Auth/Login'
    });
  }
};

// 显示选择菜单 (保留，但目前没有直接触发按钮)
const showUploadOptions = () => {
  uni.showActionSheet({
    itemList: [
      '日照金山 横屏', '日照金山 竖屏', 
      '蓝月谷 横屏', '蓝月谷 竖屏', 
      '姐妹湖 横屏', '姐妹湖 竖屏', 
      '织梦空间 横屏', '织梦空间 竖屏',
      '大理照片',
      '昆明照片',
      '丽江照片'
    ],
    success: (res) => {
      const typeMap = {
        0: 61, // 日照金山 横屏
        1: 62, // 日照金山 竖屏
        2: 71, // 蓝月谷 横屏
        3: 72, // 蓝月谷 竖屏
        4: 81, // 姐妹湖 横屏
        5: 82, // 姐妹湖 竖屏
        6: 91, // 织梦空间 横屏
        7: 92, // 织梦空间 竖屏
        8: 101, // 大理照片
        9: 201, // 昆明照片
        10: 301  // 丽江照片
      };
      
      currentType.value = typeMap[res.tapIndex];
      // 触发图片选择和上传逻辑（这里需要根据实际上传逻辑进行调用）
      chooseImagesForUpload(); // 假设有这个函数来处理图片选择和上传
    }
  });
};

// 占位函数：实际的图片选择和上传逻辑将在这里实现或调用
const chooseImagesForUpload = () => {
  if (!isLoggedIn.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  uni.showToast({
    title: '触发图片选择功能',
    icon: 'none'
  });
  // 这里可以调用之前实现的图片选择和上传逻辑
  // 例如：uni.chooseImage({ ... })
  // 为了避免重复实现，我们假设这里会调用一个独立的图片上传组件或服务。
};

// 功能列表项对应的函数
const goToMyLikes = () => {
  uni.showToast({
    title: '跳转到我的点赞',
    icon: 'none'
  });
};

const contactCustomerService = () => {
  uni.showToast({
    title: '联系客服',
    icon: 'none'
  });
};

const showCompanyAddress = () => {
  uni.showToast({
    title: '显示公司地址',
    icon: 'none'
  });
};

const clearCache = () => {
  clearImageCache();
  uni.showToast({
    title: '缓存已清除',
    icon: 'success'
  });
  // 实际清除缓存逻辑
};

const manageImages = () => {
  if (!isLoggedIn.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  uni.navigateTo({
    url: '/pages/Profile/ImageManagement'
  });
};

</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.header-background {
  width: 100%;
  height: 180px; /* 根据图片调整高度 */
  background: linear-gradient(to bottom, #eeeeee, #f5f5f5);
  border-bottom-left-radius: 50% 20px;
  border-bottom-right-radius: 50% 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px; /* 留出顶部状态栏和背景高度 */
  position: relative; /* 确保内容在背景之上 */
  z-index: 1;
}

.avatar-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  position: relative;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-name {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
}

.feature-list {
  background-color: #ffffff;
  border-radius: 12px;
  margin: 0 20px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-text {
    flex: 1;
    font-size: 16px;
    color: #333333;
    margin-left: 15px;
  }
  
  uni-icons {
    display: flex; /* 确保uni-icons可以被flex布局正确处理 */
    align-items: center;
    justify-content: center;
  }
}

.footer {
  text-align: center;
  padding: 20px 0;
  
  .copyright {
    font-size: 13px;
    color: #999999;
    display: block;
    margin-bottom: 5px;
  }
  
  .designer {
    font-size: 12px;
    color: #cccccc;
  }
}
</style> 